﻿<script setup lang="ts" name="ModuleAddEdit">
import DrawerWrap from '../DrawerWrap/index.vue'
import useDictionaryEntry from '@/hooks/useDictionaryEntry'
const { getDictionaryEntryData } = useDictionaryEntry()
const props = defineProps({
  moduleTypeList: { type: Array as any },
  industryList: { type: Array as any }
})
const formResult = ref({
  industry: [],
  name: '',
  lang: '',
  package: '',
  remark: '',
  type: [],
  pcJsCode: '',
  pcCssCode: '',
  pcHtmlCode: '',
  pcPlugins: [],
  mJsCode: '',
  mCssCode: '',
  mHtmlCode: '',
  mPlugins: [],
  appJsCode: '',
  appCssCode: '',
  appHtmlCode: '',
  appPlugins: []
})

const pluginsList = ref([])
const pcPluginsList = ref([])
const mPluginsList = ref([])
const appPluginsList = ref([])
const getPluginsList = async () => {
  console.log('获取状态数据')
  pluginsList.value = await getDictionaryEntryData({
    label: '',
    status: 2,
    type: 'plugins'
  })
  pluginsList.value.forEach((item) => {
    switch (item.value) {
      case 'pc':
        pcPluginsList.value = item.children
        break
      case 'wap':
        mPluginsList.value = item.children
        break
      default:
        appPluginsList.value = item.children
        break
    }
  })
}
getPluginsList()
const getIndustryValue = (data) => {
  let result = []
  props.industryList.forEach((item) => {
    if (item.label === data) {
      result = [item.value]
    }
  })
  return result
}

const getModuleTypeValue = (data) => {
  let result = []
  props.moduleTypeList.forEach((item) => {
    if (item.children.length > 0) {
      item.children.forEach((current) => {
        if (current.label === data) {
          result = [item.value, current.value]
        }
      })
    }
  })
  return result
}

const drawerWrap = ref(null)
// 显示新建/编辑模块表单抽屉弹窗
const showDrawerWrap = (v) => {
  getLanguageList()
  drawerWrap.value.showDrawer(v)
  if (v.type === 'edit') {
    console.log(v)
    formResult.value.industry = getIndustryValue(v.options.industry)
    formResult.value.type = getModuleTypeValue(v.options.module)
    formResult.value.name = v.options.title
    formResult.value.remark = v.options.description
    formResult.value.package = v.options.package
  } else {
    formResult.value.industry = []
    formResult.value.type = []
    formResult.value.name = ''
    formResult.value.remark = ''
    formResult.value.package = ''
  }
}
// 子组件将方法暴露给父组件
defineExpose({ showDrawerWrap })

const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const disabled = ref(false)
// 预览图删除事件
const handleRemove = (file) => {
  console.log(file)
}
// 预览图预览事件
const handlePictureCardPreview = (file) => {
  dialogImageUrl.value = file.url!
  dialogVisible.value = true
}

const handleChange = (value) => {
  console.log(value)
}

const languageList = ref([])
const getLanguageList = async () => {
  console.log('获取状态数据')
  languageList.value = await getDictionaryEntryData({
    label: '',
    status: 2,
    type: 'language'
  })
}
</script>

<template>
  <DrawerWrap ref="drawerWrap">
    <el-form class="website-page-module-form" label-width="auto" label-position="right">
      <el-form-item label="模块昵称">
        <el-input v-model="formResult.name" placeholder="请输入昵称" />
      </el-form-item>
      <el-form-item label="唯一标识">
        <el-input v-model="formResult.package" placeholder="请输入标识名" />
      </el-form-item>
      <el-form-item label="模块分类">
        <el-cascader v-model="formResult.type" :options="moduleTypeList" @change="handleChange" placeholder="请选择模块分类" />
      </el-form-item>
      <el-form-item label="语言">
        <el-select v-model="formResult.lang" placeholder="选择语言">
          <el-option v-for="item in languageList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="所属行业" class="industry">
        <el-checkbox-group v-model="formResult.industry">
          <el-checkbox-button v-for="(item, index) in industryList" :key="index" :label="item.value">{{ item.label }}</el-checkbox-button>
        </el-checkbox-group>
      </el-form-item>
      <el-tabs type="border-card">
        <el-tab-pane label="桌面端（H5）">
          <el-form-item label="页面源码">
            <el-input v-model="formResult.pcHtmlCode" type="textarea" placeholder="请输入桌面端页面源码" />
          </el-form-item>
          <el-form-item label="样式源码">
            <el-input v-model="formResult.pcCssCode" type="textarea" placeholder="请输入桌面端样式源码" />
          </el-form-item>
          <el-form-item label="脚本源码">
            <el-input v-model="formResult.pcJsCode" type="textarea" placeholder="请输入桌面端脚本源码" />
          </el-form-item>
          <el-form-item label="插件" class="industry">
            <el-checkbox-group v-model="formResult.pcPlugins">
              <el-checkbox-button v-for="(item, index) in pcPluginsList" :key="index" :label="item.value">{{ item.label }}</el-checkbox-button>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="预览图" class="preview-img">
            <el-upload action="#" list-type="picture-card" :auto-upload="false">
              <el-icon>
                <Plus />
              </el-icon>
              <template #file="{ file }">
                <div>
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                      <el-icon><zoom-in /></el-icon>
                    </span>
                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                      <el-icon>
                        <Delete />
                      </el-icon>
                    </span>
                  </span>
                </div>
              </template>
            </el-upload>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="移动端（H5）">
          <el-form-item label="页面源码">
            <el-input v-model="formResult.mHtmlCode" type="textarea" placeholder="请输入移动端页面源码" />
          </el-form-item>
          <el-form-item label="样式源码">
            <el-input v-model="formResult.mCssCode" type="textarea" placeholder="请输入移动端样式源码" />
          </el-form-item>
          <el-form-item label="脚本源码">
            <el-input v-model="formResult.mJsCode" type="textarea" placeholder="请输入移动端脚本源码" />
          </el-form-item>
          <el-form-item label="插件" class="industry">
            <el-checkbox-group v-model="formResult.mPlugins">
              <el-checkbox-button v-for="(item, index) in mPluginsList" :key="index" :label="item.value">{{ item.label }}</el-checkbox-button>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="预览图" class="preview-img">
            <el-upload action="#" list-type="picture-card" :auto-upload="false">
              <el-icon>
                <Plus />
              </el-icon>
              <template #file="{ file }">
                <div>
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                      <el-icon><zoom-in /></el-icon>
                    </span>
                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                      <el-icon>
                        <Delete />
                      </el-icon>
                    </span>
                  </span>
                </div>
              </template>
            </el-upload>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="小程序（uniapp）">
          <el-form-item label="页面源码">
            <el-input v-model="formResult.appHtmlCode" type="textarea" placeholder="请输入uniapp页面源码" />
          </el-form-item>
          <el-form-item label="样式源码">
            <el-input v-model="formResult.appCssCode" type="textarea" placeholder="请输入uniapp样式源码" />
          </el-form-item>
          <el-form-item label="脚本源码">
            <el-input v-model="formResult.appJsCode" type="textarea" placeholder="请输入uniapp脚本源码" />
          </el-form-item>
          <el-form-item label="插件" class="industry">
            <el-checkbox-group v-model="formResult.appPlugins">
              <el-checkbox-button v-for="(item, index) in appPluginsList" :key="index" :label="item.value">{{ item.label }}</el-checkbox-button>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="预览图" class="preview-img">
            <el-upload action="#" list-type="picture-card" :auto-upload="false">
              <el-icon>
                <Plus />
              </el-icon>
              <template #file="{ file }">
                <div>
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                      <el-icon><zoom-in /></el-icon>
                    </span>
                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                      <el-icon>
                        <Delete />
                      </el-icon>
                    </span>
                  </span>
                </div>
              </template>
            </el-upload>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
      <el-form-item label="模块备注">
        <el-input v-model="formResult.remark" type="textarea" placeholder="请输入网站特点描述" />
      </el-form-item>
    </el-form>
    <el-dialog class="image-preview-dialog" v-model="dialogVisible">
      <img :src="dialogImageUrl" alt="预览图" />
    </el-dialog>
  </DrawerWrap>
</template>

<style scoped lang="scss"></style>
